import { Timeline } from "@mui/lab";
import {
  TimelineConnector,
  TimelineContent,
  TimelineItem,
  TimelineOppositeContent,
  TimelineSeparator,
} from "@mui/lab";
import { Paper, Typography } from "@mui/material";
import React from "react";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import PauseCircleFilledIcon from "@mui/icons-material/PauseCircleFilled";
import AccessTimeFilledIcon from "@mui/icons-material/AccessTimeFilled";
import { useContext } from "react";
import { TitleContext } from "../../../router";
import { useEffect } from "react";
import { queryClient } from "../../../query/CustomQueryClient";
import useExamPlan from "../../../query/useExamPlan";
import useScore from "../../../query/useScore";
import { useState } from "react";
import Loading from "../../../components/loading";
import { Box } from "@mui/system";
import examBeginUrl from "../../../img/exambegin.gif";
import examEndUrl from "../../../img/examend.gif";
import FindFail from "../../../components/FindFail";

const formatDate = (date, fmt) => {
  if (typeof date == "string") {
    return date;
  }

  if (!fmt) fmt = "yyyy-MM-dd hh:mm:ss";

  if (!date || date == null) return null;
  var o = {
    "M+": date.getMonth() + 1, // 月份
    "d+": date.getDate(), // 日
    "h+": date.getHours(), // 小时
    "m+": date.getMinutes(), // 分
    "s+": date.getSeconds(), // 秒
    "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
    S: date.getMilliseconds(), // 毫秒
  };
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(
      RegExp.$1,
      (date.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
  }
  return fmt;
};
export default function ExamPlan() {
  useEffect(() => {
    queryClient.clear();
  }, []);
  const [plandata, setPlandata] = useState([]);

  const nowTitle = useContext(TitleContext);
  useEffect(() => {
    nowTitle.setnowTitle(6);
  });

  const { data, isFetching, isError, error, isSuccess } = useExamPlan();
  useEffect(() => {
    if (isSuccess) {
      setPlandata(data.data.data);
    }
  }, [isSuccess]);

  const nowDate = formatDate(new Date(), "yyyy-MM-dd");
  const nowTime = formatDate(new Date(), "hh:mm");

  const handleChange = (e) => {
    //
    if (nowDate < e.date) return 3;
    if (nowDate > e.date) return 1;
    if (nowTime > e.endtime) return 1;
    if (nowTime < e.betime) return 3;
    return 2;
  };

  return (
    <div>
      <Paper sx={{ width: "98%", paddingTop: "50px", minHeight: "600px" }}>
        {isFetching && <Loading />}
        {isSuccess && !isFetching && !plandata && <FindFail />}
        {isSuccess && !isFetching && plandata && (
          <>
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
              }}
            >
              <img
                alt="BEGIN"
                style={{ width: "65px", marginBottom: "-20px" }}
                src={examBeginUrl}
              ></img>
            </Box>

            <Timeline position="alternate">
              {plandata?.map((value) => {
                return (
                  <TimelineItem>
                    <TimelineOppositeContent
                      sx={{ m: "auto 0" }}
                      align="right"
                      variant="body2"
                      color="text.primary"
                    >
                      <Typography> {value.date}</Typography>
                      {value.betime + "-" + value.endtime}
                    </TimelineOppositeContent>
                    <TimelineSeparator>
                      {/* <TimelineDot color="primary" variant="filled"> */}
                      {handleChange(value) === 1 && (
                        <>
                          <TimelineConnector sx={{ bgcolor: "primary.main" }} />
                          <CheckCircleIcon
                            fontSize="large"
                            color="success"
                            variant="filled"
                          />
                          <TimelineConnector sx={{ bgcolor: "primary.main" }} />
                        </>
                      )}
                      {handleChange(value) === 2 && (
                        <>
                          <TimelineConnector sx={{ bgcolor: "primary.main" }} />
                          <PauseCircleFilledIcon
                            fontSize="large"
                            color="primary"
                            variant="filled"
                          />
                          <TimelineConnector />
                        </>
                      )}
                      {handleChange(value) === 3 && (
                        <>
                          <TimelineConnector />
                          <AccessTimeFilledIcon
                            fontSize="large"
                            color="warning"
                            variant="filled"
                          />
                          <TimelineConnector />
                        </>
                      )}
                      {/* </TimelineDot> */}
                    </TimelineSeparator>
                    <TimelineContent sx={{ py: "12px", px: 2 }}>
                      <Typography variant="h6" component="span">
                        {value.name}
                      </Typography>
                      <Typography>{"考试地点:" + value.area}</Typography>
                    </TimelineContent>
                  </TimelineItem>
                );
              })}
            </Timeline>
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
              }}
            >
              <img
                alt="END"
                style={{ width: "65px", marginTop: "-30px" }}
                src={examEndUrl}
              ></img>
            </Box>
          </>
        )}
      </Paper>
    </div>
  );
}
